
<!-- 设置模板 -->
<template>
  <el-container>
  
    <!-- 侧边栏菜单 -->
    <el-aside>
      <el-scrollbar>
        <el-menu :default-openeds="['1']" :router="true">
          <el-affix :offset="0">
            <el-menu-item class="logo-container">
              <div class="logo-icon">
                <el-avatar shape="square" :size="30" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi4%2F863504425%2FO1CN0188GGWx1iYh5AAWjuf_%21%21863504425.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694006734&t=dbad5780eda7692d2791301347e1b5d4" />
                <span class="logo-txt">材料管理系统</span>
              </div>
            </el-menu-item>
          </el-affix>

          <template v-for="menu in menuList">
            <template v-if="menuHasChildren(menu)" >
              <el-sub-menu :index="menu.path" :key="menu.id">
                <!-- 有子菜单的 一级菜单 -->
                <template #title>
                  <el-icon><component :is="menu.icon"/></el-icon>
                  <span>{{ menu.name }}</span>
                </template>

                <!-- 子菜单 -->
                <el-menu-item v-for="child in menu.children" :index="child.path" :key="child.id">
                  <span>{{ child.name }}</span>
                </el-menu-item>
              </el-sub-menu>
            </template>
          
            <!-- 无子菜单的 一级菜单 -->
            <template v-else>
              <el-menu-item :index="menu.path" :key="menu.id">
                <el-icon><component :is="menu.icon"/></el-icon>
                <span>{{menu.name}}</span>
              </el-menu-item>
            </template>
          </template>
          
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>

      <!-- 顶部 -->
      <el-header>
        <el-affix :offset="0">  <!-- 固定顶部 -->
          <!-- 开启router 模式后， index内容填充url -->

          <el-menu 
          mode="horizontal" 
          :router="true" 
          width="100%">
            <el-menu-item index="/">Home</el-menu-item>

            <el-menu-item index="/about">About</el-menu-item>

            <el-sub-menu index="2">
              <template #title>Workspace</template>
              <el-menu-item index="2-1">item one</el-menu-item>
              <el-menu-item index="2-2">item two</el-menu-item>
              <el-menu-item index="2-3">item three</el-menu-item>
              <el-sub-menu index="2-4">
                <template #title>item four</template>
                <el-menu-item index="2-4-1">item one</el-menu-item>
                <el-menu-item index="2-4-2">item two</el-menu-item>
                <el-menu-item index="2-4-3">item three</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            
          </el-menu>
        </el-affix>
      </el-header>
        
      <!-- 内容区域 -->
      <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">home</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/about' }">about</el-breadcrumb-item>
        </el-breadcrumb>


        <!-- router 回写区域 -->
        <router-view></router-view>
        
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <!-- <router-link to="/">Home</router-link> | 
        <router-link to="/about">About</router-link> |
        <router-link to="/form">Form</router-link> |
        <router-link to="/fn">Function</router-link> |
        <router-link to="/event">Event</router-link> |
        <router-link to="/params">Params Get</router-link> -->
        
      </el-main>
      
      <!-- 底部 -->
        <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
  
</template>

<script setup>
import { ref } from "vue";

const menuList = ref([
  {
    id: 1,
    name: "Vue3 Demo",
    path: "",
    icon: "House",
    children: [
      {
        id: 2,
        name: "表单结构",
        path: "/form"
      },
      {
        id: 3,
        name: "调用函数",
        path: "/fn",
      },
      {
        id: 4,
        name: "模拟事件",
        path: "/event",
      },
      {
        id: 5,
        name: "模拟传递参数",
        path: "/params",
      }]
  },

  {
    id: 6,
    name: "测试一级菜单",
    icon: "Tools",
    path: "/home",
    children: []
  }
  
]);
</script>

<script>
export default {
  // data() {
  //     return {
  //       flagData: false,
  //       arrayData:  [{name: 'A', sex: 1, age: 18}, {name: 'B', sex: 0, age: 18}, {name: 'C', sex: 1, age: 19}]
  //     }
  // },
  name: 'App',
  methods: {
    menuHasChildren (menu){

      if (menu.children && menu.children.length > 0){
        return true
      }    
      return false
 
    }
  }
}

</script>

<style scoped>
/* #app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} */

.el-container {
  height: 100%;
}

.el-aside {
  width: 200px;
  text-align: left;
}

.el-aside .el-menu{
  height:100vh
}

.logo-container {
  width: 200; 
  background-color: #FFFFFF;
}

.logo-icon {
  margin: 0 0 0 10px;
  display: flex;
  align-items: center;
}

.logo-txt {
  align-items: center;
  margin: 0 5px 0 5px;
}

.el-header {
  padding: 0;
}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  height: 40px !important;
}
</style>
